<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <uni-list style="margin: 10px" :border="true" v-for="(item,index) in dataList" :key="index">
     <!-- 自定义右侧内容 -->

        <view class="uni-list-cell" style="display: flex; flex-direction: column;">
          <view style="display: flex; align-items: flex-start;">
            <u-avatar :src="formatUrl(item.photoUrl)" size="40"></u-avatar>
            <view class="uni-list-cell__container" style="flex: 1; margin-left: 10px;">
              <view class="uni-list-cell__text">{{ item.artifactName }}</view>
              <view class="uni-list-cell__note">{{ item.reviewDate }}</view>
            </view>
            <view class="uni-list-cell__extra" style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 10px;">
              <u-rate :readonly="true" :value="item.rating" :count="5"></u-rate>
            </view>
          </view>
          <view class="uni-list-cell__review" style="margin-top: 10px; width: 100%;">
            <u--textarea :maxlength="200" v-model="item.reviewText" placeholder="请输入内容" disabled count></u--textarea>
          </view>
          <view class="uni-list-cell__extra" style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 100px;margin-right: 100px;margin-top: 10px">
            <u-button type="error" size="mini" @click="handleCancelReview(item.reviewId)">删除</u-button>
          </view>
        </view>
    </uni-list>
  </z-paging>
</template>

<script>
import { listMyReview,delReview } from '@/api/system/review.js';
import config from '@/config';

export default {
  data() {
    return {
      dataList: [], // 初始相册列表
    };
  },
  mounted() {

  },
  methods: {
    queryList(pageNo, pageSize) {
      let queryParams = {
        pageNum: pageNo,
        pageSize: pageSize
      }
      // 此处请求仅为演示，请替换为自己项目中的请求
      listMyReview(queryParams).then(res => {
        // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
        this.$refs.paging.complete(res.rows);
      })
    },
    formatUrl(url) {
      return config.baseUrl + url
    },
    handleCancelReview(id) {
      delReview(id).then(response => {
        uni.showToast({
          title: '删除评价成功',
          icon: 'none'
        })
        this.$refs.paging.reload();
      }).catch(error => {
        uni.showToast({
          title: '删除评价失败:'+error.msg,
          icon: 'none'
        })
      })
    }
  },
};
</script>


<style scoped>
.u-demo-block{
  margin: 20px;
}

.album-container {
  height: 100%; /* 根据需要调整高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.u-page {
  padding: 20rpx;
}

.album {
  padding: 40rpx;
  background-color: ghostwhite;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.album__avatar {
  margin-right: 20rpx;
}

.album__content {
  flex: 1;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
}

.uni-list-cell {
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.uni-list-cell__container {
  flex: 1;
  margin-left: 10px;
}

.uni-list-cell__text {
  font-size: 16px;
  font-weight: bold;
}

.uni-list-cell__note {
  font-size: 14px;
  color: #999;
}

.uni-list-cell__extra {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;
}

.uni-list-cell__review {
  margin-top: 10px;
  width: 100%;
}

.u--textarea {
  width: 100%;
  min-height: 60px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
}
</style>
